<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__LAYUIMINI__/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="__LAYUIMINI__/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__LAYUIMINI__/css/public.css" media="all">
</head>
<style type="text/css">
 
    .uploader-list {
        margin-left: -15px;
    }

    .uploader-list .info {
        position: relative;
        margin-top: -25px;
        background-color: black;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        width: 100px;
        height: 25px;
        text-align: center;
        display: none;
    }

    .uploader-list .handle{
        position: relative;
        background-color: black;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        width: 100px;
        text-align: right;
        height: 18px;
        margin-bottom: -18px;
        display: none;
    }

    .uploader-list .handle  i{
        margin-right: 5px;
    }

    .uploader-list .handle  i:hover {
        cursor: pointer;
    }

    .uploader-list .handle-video{
        position: relative;
        background-color: black;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        width: 100px;
        text-align: right;
        height: 18px;
        margin-bottom: -18px;
        display: none;
    }

    .uploader-list .handle-video  i{
        margin-right: 5px;
    }

    .uploader-list .handle-video  i:hover {
        cursor: pointer;
    }


    .uploader-list .file-iteme {
        margin: 12px 0 0 15px;
        padding: 1px;
        float: left;
    }

    .flex-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
    

</style>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <!-- layui-form-pane 方框式表单 -->
            <form class="layui-form layui-form-pane" action="" lay-filter="example">
                <div class="layui-form-item">
                    <label class="layui-form-label">素材名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" value="{$one['name']}" autocomplete="off" readonly placeholder="请输入名称"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-block">
                        <div class="layui-upload">
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="demo1" style="max-width: 300px;max-height: 300px;" src="{$one['logo2']}">
                                <p id="demoText"></p>
                            </div>
                            <input type="hidden" name="logo" id="file_id" value="{$one['logo']}">
                            
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-block">
                        <select name="type_id" lay-verify="required" lay-filter="type_id" disabled>
                            {volist name="$ProductTypeList" id="vo"}
                            <option value="{$vo.id}">{$vo.name}</option>
                            
                            {/volist}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">子分类</label>
                    <div class="layui-input-block">
                        <select name="type_child_id" id="type_child_id" disabled>
                            <option value="0">请选择</option>
                            {volist name="$ProductTypeChildList" id="vo"}
                            <option value="{$vo.id}">{$vo.name}</option>
                            
                            {/volist}                   
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="上架" >
                        <input type="radio" name="status" value="2" title="下架"  >
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="number" name="sort" value="{$one['sort']}" autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
               
                <div class="layui-form-item">
                    <label class="layui-form-label">视频或轮播</label>
                    <div class="layui-input-block">
                        <input type="radio" name="video_or_banner" value="1" title="视频"  lay-filter="video_or_banner" disabled>
                        <input type="radio" name="video_or_banner" value="2" title="轮播图"  lay-filter="video_or_banner">
                    </div>
                </div>
                <div class="layui-upload layui-form-item"  id="video">
                    
                    <div class="layui-upload-list">
                        
                      <label class="layui-form-label">视频展示</label>
                      <video controls class="layui-upload-video" id="videoPreview" style="max-width: 100%;max-height: 300px;"  src="{$one['video_url2']}"></video>
                      <input type="hidden" name="videoUrl" id="videoUrl" value="{$one['video_url2']}">
                    </div>
                </div>

                <div class="layui-form-item" id="images">
                    <label class="layui-form-label">轮播图</label>
                    <div class="layui-input-block">
                        <div class="layui-upload">
                          <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
                                {volist name="banner_list" id="vo"}
                                <div id="" class="file-iteme">
                                    <div class="handle"><i class="layui-icon layui-icon-delete"></i></div>
                                    <img style="width: 100px;height: 100px;" src="{$vo['file_url2']}">
                                    <input type="hidden" name="files_id[{$vo['id']}]" value="{$vo['file_url']}">
                                    <div class="info">{$vo['name']}</div>
                                </div>
                                {/volist}
                            </div>
                         </blockquote>
                        </div>
                    </div>
                </div>
              
                <div class="layui-form-item" >
                    <label class="layui-form-label">内容</label>
                    <div class="layui-input-block">
                        <textarea class="span12 ckeditor" id="goods_content" name="goods_content" title="" readonly>{$one['content']}</textarea>
                    </div>
                </div>
                
                <input type="hidden" name="id" id="" value="{$one['id']}">
           
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                        <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="__LAYUIMINI__/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="__LAYUIMINI__/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    
<script src="__LAYUIMINI__/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8" src="__LAYUIMINI__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__LAYUIMINI__/ueditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="__LAYUIMINI__/ueditor/lang/zh-cn/zh-cn.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        layui.use(['form', 'iconPickerFa',"upload",'element'], function () {
            var form = layui.form,
                iconPickerFa = layui.iconPickerFa,
                $ = layui.$,
                upload = layui.upload,
                layer = layui.layer,
                element = layui.element;


                var status = "{$one['status']}";
                var type_id = "{$one['type_id']}";
                var type_child_id = "{$one['type_child_id']}";
                var video_or_banner = "{$one['video_or_banner']}";
                $("input[name=status][value="+status+"]").prop("checked","true");
                $("input[name=video_or_banner][value="+video_or_banner+"]").prop("checked","true");
                $("#type_id").val(type_id);
                $("#type_child_id").val(type_child_id);
                layui.form.render();

                console.log(type_id);

                if(video_or_banner == 1){
                   
                    $("#video").show();
                    $("#images").hide();
                }else{
                    $("#video").hide();
                    $("#images").show();
                }

              
                form.on('radio(video_or_banner)', function(data){
                    if(data.value == 1){
                        $("#video").show();
                        $("#images").hide();
                    }else{
                        $("#video").hide();
                        $("#images").show();
                    }
                });  

             //常规使用 - 普通图片上传
             var uploadInst = upload.render({
                elem: '#test1'
                , url: 'addFile' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                ,data:{
                    type:1
                }
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });

                    element.progress('demo', '0%'); //进度条复位
                    layer.msg('上传中', { icon: 16, time: 0 });
                }
                , done: function (res) {
                    //如果上传失败
                    
                    if (res.status == 1) {
                        $('#file_id').val(res.fileName)
                    }
                    layer.msg(res.msg);
                    //上传成功的一些操作
                    //……
                  
                    $('#demoText').html(''); //置空上传失败的状态
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
                //进度条
                , progress: function (n, elem, e) {
                    element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('上传完毕', { icon: 1 });
                    }
                }
            });



            //轮播图多图上传
            upload.render({
                elem: '#test-upload-more'
                ,url: "addFile"
                ,multiple: true
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                
                    obj.preview(function(index, file, result){
                        $('#test-upload-more-list').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                    });
                }
                ,done: function(res){
                   
                    if(res.status == 1){
                        $('#uploader-list').append(
                            '<div id="" class="file-iteme">' +
                            '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
                            '<img style="width: 100px;height: 100px;" src='+ res.url +'>' +
                            '<input type="hidden" name="files_id['+res.file_id+']" value="'+res.fileName+'">' +
                            '<div class="info">' + res.name + '</div>' +
                            '</div>'
                        );
                    }else{
                        layer.msg(res.error);
                        return false;
                    }
                    
                }
            });
    


             // 执行实例
             var uploadInst = upload.render({
                elem: '#uploadVideo', // 绑定元素
                url: 'addFile', // 上传接口
                accept: 'video', // 视频文件
                done: function(res){
                    // 上传完毕回调
                    if (res.status === 1) {
                        // 上传成功
                        $('#videoPreview').attr('src', res.url); // 显示上传的视频
                        $('#videoUrl').val(res.fileName); // 将视频地址保存到隐藏域中
                    } else {
                        // 上传失败
                        layer.msg(res.msg, {icon: 2});
                    }
                },
                error: function(){
                    // 请求异常回调
                    layer.msg('上传失败', {icon: 2});
                }
            });

            
         

            form.on('select(type_id)', function(data){
                var selectedValue = data.value; // 获取选中的值
                $.ajax({
                    type: "post",
                    url: "materialTypeListApi",
                    data: {"type_id":selectedValue},
                    dataType: "json",
                    success: function (res) {
                        if (res.code == 1) {
                            // 清空子类型下拉菜单
                            $('#type_child_id').empty();
                            
                            // 将获取的子类型数据添加到子类型下拉菜单中
                            $('#type_child_id').append('<option value="0">请选择</option>');
                            $.each(res.list, function(index, item){
                                $('#type_child_id').append('<option value="' + item.id + '">' + item.name + '</option>');
                            });
                            
                            // 重新渲染下拉菜单（如果使用了Layui的form模块）
                            layui.form.render('select'); 
                        }else{
                            $('#type_child_id').empty();
                             // 重新渲染下拉菜单（如果使用了Layui的form模块）
                             layui.form.render('select'); 
                        }
                    }
                });
            });



            //监听指定开关
            form.on('switch(switchTest)', function (data) {

            });

            //监听提交
            form.on('submit(demo1)', function (data) {
               
                $.ajax({
                    type: "post",
                    url: "saveProduct",
                    data: data.field,
                    dataType: "json",
                    success: function (res) {
                        if (res.code == 1) {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            // parent.layer.close(index); //再执行关闭 
                            // 关闭后调用
                            layer.msg(res.msg)
                            setTimeout(function () {
                                parent.layer.close(index);
                            }, 500)
                        } else {
                            layer.msg(res.msg)
                        }


                    }
                });
                return false;
            });

             // 删除图片
            $(document).on("click", ".file-iteme .handle", function(event){
                var files_id = $(this).parent().find("input").val();
                var that = $(this)
                that.parent().remove();
               
            });

            $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
                if(event.type === "mouseenter"){
                    //鼠标悬浮
                    $(this).children(".info").fadeIn("fast");
                    $(this).children(".handle").fadeIn("fast");
                }else if(event.type === "mouseleave") {
                    //鼠标离开
                    $(this).children(".info").hide();
                    $(this).children(".handle").hide();
                }
            });

        });
    </script>
   <script type="text/javascript">

    var editor;
    $(function () {
        //具体参数配置在  editor_config.js  中
        var options = {
            zIndex: 999,
            initialFrameWidth: "95%", //初化宽度
            initialFrameHeight: 400, //初化高度
            focus: false, //初始化时，是否让编辑器获得焦点true或false
            maximumWords: 99999, removeFormatAttributes: 'class,style,lang,width,height,align,hspace,valign'
            , //允许的最大字符数 'fullscreen',
            pasteplain:false, //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
            autoHeightEnabled: true
            /*   autotypeset: {
             mergeEmptyline: true,        //合并空行
             removeClass: true,           //去掉冗余的class
             removeEmptyline: false,      //去掉空行
             textAlign: "left",           //段落的排版方式，可以是 left,right,center,justify 去掉这个属性表示不执行排版
             imageBlockLine: 'center',    //图片的浮动方式，独占一行剧中,左右浮动，默认: center,left,right,none 去掉这个属性表示不执行排版
             pasteFilter: false,          //根据规则过滤没事粘贴进来的内容
             clearFontSize: false,        //去掉所有的内嵌字号，使用编辑器默认的字号
             clearFontFamily: false,      //去掉所有的内嵌字体，使用编辑器默认的字体
             removeEmptyNode: false,      //去掉空节点
             //可以去掉的标签
             removeTagNames: {"font": 1},
             indent: false,               // 行首缩进
             indentValue: '0em'           //行首缩进的大小
             }*/,
            toolbars: [
                ['fullscreen', 'source', '|', 'undo', 'redo',
                 '|', 'bold', 'italic', 'underline', 'fontborder',
                 'strikethrough', 'superscript', 'subscript',
                 'removeformat', 'formatmatch', 'autotypeset',
                 'blockquote', 'pasteplain', '|', 'forecolor',
                 'backcolor', 'insertorderedlist',
                 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                 'customstyle', 'paragraph', 'fontfamily', 'fontsize',
                 '|', 'directionalityltr', 'directionalityrtl',
                 'indent', '|', 'justifyleft', 'justifycenter',
                 'justifyright', 'justifyjustify', '|', 'touppercase',
                 'tolowercase', '|', 'link', 'unlink', 'anchor', '|',
                 'imagenone', 'imageleft', 'imageright', 'imagecenter',
                 '|', 'insertimage', 'emotion', 'insertvideo',
                 'attachment', 'map', 'gmap', 'insertframe',
                 'insertcode', 'webapp', 'pagebreak', 'template',
                 'background', '|', 'horizontal', 'date', 'time',
                 'spechars', 'wordimage', '|',
                 'inserttable', 'deletetable',
                 'insertparagraphbeforetable', 'insertrow', 'deleterow',
                 'insertcol', 'deletecol', 'mergecells', 'mergeright',
                 'mergedown', 'splittocells', 'splittorows',
                 'splittocols', '|', 'print', 'preview', 'searchreplace']
            ]
        };
        editor = new UE.ui.Editor(options);
        editor.render("goods_content");  //  指定 textarea 的  id 为 goods_content

    });
</script>

</body>

</html>